/*
 * @Author: jjjjwei 1506865174@qq.com
 * @Date: 2022-08-11 19:49:26
 * @LastEditors: jjjjwei 1506865174@qq.com
 * @LastEditTime: 2022-08-11 20:09:38
 * @FilePath: \bpm-management-system\src\component\Asider.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */


import React, { useState, useEffect } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import * as IconNode from "@ant-design/icons";
import {actions} from './../store/features/userSlice'
import { useSelector,useDispatch } from "react-redux";
import { Menu, Layout } from "antd";
const { Sider } = Layout;

function Asider() {
  const navigate = useNavigate();
  const dispatch = useDispatch()
  const { pathname } = useLocation();
  const { user, res, list } = useSelector((state) => state.userReducer);
  const [defaultKey, setDefaultKey] = useState("/home/home");
  // console.log(111, 'asider组件渲染', list);

  useEffect(() => {
    let path = pathname;
    
    if(path==='/home/examinemanage/Wofaqideshenpi'){
      setDefaultKey("/home/examinemanage/wofaqideshenpi/Banzufukuanshenqing");
      navigate("/home/examinemanage/wofaqideshenpi/Banzufukuanshenqing")
    }else{
      setDefaultKey(path);
      // setdefaultopenKey('/home/examinemanage')
    }
  }, [pathname]);
  // const menuArr = [{}]
  function BindMianbaoxie(str) {
    const arr1 = []
    const arr = str.split("/");
    for (let i = 0; i < arr.length; i++) {
      Object.keys(res).forEach((key) => {
        if(arr[i] === key){
            arr1.push(res[key])
            return
        }
      });
    }
    dispatch(actions.setMianbaoxie([...arr1]))
  }
  //点击菜单事件
  const MenuProps = (e) => {
    sessionStorage.setItem('key', e.key)
    BindMianbaoxie(e.key,555)
    navigate(e.key);
    // console.log(e.keyPath);
    // setdefaultopenKey(e.keyPath[1])
    setDefaultKey(e.key);
  };
  //动态生成导航菜单
  function bindMenu(menuList) {
    if (props.name === '我发起的审批') {
      menuList = [{
        menuId: 201,
        menuName: "班组付款申请",
        ismenu: true,
        menuUrl: "/home/examinemanage/wofaqideshenpi/Banzufukuanshenqing",
        pathRoute: 'Banzufukuanshenqing',
        pathname: "Banzufukuanshenqing",
        componentPath: "examinemanage/wofaqideshenpi/Banzufukuanshenqing",
        menuImgClass: 'VideoCameraAddOutlined',
        pId: 107,
        menuState: "0",
        isContainChildren: false,
        menuChilds: []
      }, {
        menuId: 202,
        menuName: "材料采购付款申请",
        ismenu: true,
        menuUrl: "/home/examinemanage/wofaqideshenpi/Cailiaocaigoufukuanshenqing",
        pathRoute: 'Cailiaocaigoufukuanshenqing',
        pathname: "Cailiaocaigoufukuanshenqing",
        componentPath: "examinemanage/wofaqideshenpi/Cailiaocaigoufukuanshenqing",
        menuImgClass: 'VideoCameraAddOutlined',
        pId: 107,
        menuState: "0",
        isContainChildren: false,
        menuChilds: []
      }, {
        menuId: 203,
        menuName: "临时付款申请",
        ismenu: true,
        menuUrl: "/home/examinemanage/wofaqideshenpi/linshifukuanshenqing",
        pathRoute: 'linshifukuanshenqing',
        pathname: "linshifukuanshenqing",
        componentPath: "examinemanage/wofaqideshenpi/Linshifukuanshenqing",
        menuImgClass: 'VideoCameraAddOutlined',
        pId: 107,
        menuState: "0",
        isContainChildren: false,
        menuChilds: []
      }, {
        menuId: 204,
        menuName: "用章申请",
        ismenu: true,
        menuUrl: "/home/examinemanage/wofaqideshenpi/Yongzhangshenqing",
        pathRoute: 'Yongzhangshenqing',
        pathname: "Yongzhangshenqing",
        componentPath: "examinemanage/wofaqideshenpi/Yongzhangshenqing",
        menuImgClass: 'VideoCameraAddOutlined',
        pId: 107,
        menuState: "0",
        isContainChildren: false,
        menuChilds: []
      }, {
        menuId: 205,
        menuName: "选样申请",
        ismenu: true,
        menuUrl: "/home/examinemanage/wofaqideshenpi/Xuanyangshenqing",
        pathRoute: 'Xuanyangshenqing',
        pathname: "Xuanyangshenqing",
        componentPath: "examinemanage/wofaqideshenpi/Xuanyangshenqing",
        menuImgClass: 'VideoCameraAddOutlined',
        pId: 107,
        menuState: "0",
        isContainChildren: false,
        menuChilds: []
      }, {
        menuId: 206,
        menuName: "联系单签发申请",
        ismenu: true,
        menuUrl: "/home/examinemanage/wofaqideshenpi/Lianxidanqianfashenqing",
        pathRoute: 'Lianxidanqianfashenqing',
        pathname: "Lianxidanqianfashenqing",
        componentPath: "examinemanage/wofaqideshenpi/Lianxidanqianfashenqing",
        menuImgClass: 'VideoCameraAddOutlined',
        pId: 107,
        menuState: "0",
        isContainChildren: false,
        menuChilds: []
      }, {
        menuId: 207,
        menuName: "材料采购申请",
        ismenu: true,
        menuUrl: "/home/examinemanage/wofaqideshenpi/Cailiaocaigoushenqing",
        pathRoute: 'Cailiaocaigoushenqing',
        pathname: "Cailiaocaigoushenqing",
        componentPath: "examinemanage/wofaqideshenpi/Cailiaocaigoushenqing",
        menuImgClass: 'VideoCameraAddOutlined',
        pId: 107,
        menuState: "0",
        isContainChildren: false,
        menuChilds: []
      }, {
        menuId: 208,
        menuName: "劳务申请",
        ismenu: true,
        menuUrl: "/home/examinemanage/wofaqideshenpi/Laowushenqing",
        pathRoute: 'Laowushenqing',
        pathname: "Laowushenqing",
        componentPath: "examinemanage/wofaqideshenpi/Laowushenqing",
        menuImgClass: 'VideoCameraAddOutlined',
        pId: 107,
        menuState: "0",
        isContainChildren: false,
        menuChilds: []
      }]
    
  }
  let arr = [];
  arr = menuList.map((item) => {
      const ICON = IconNode[item.menuImgClass];
      if (item.menuChilds && item.menuChilds.length > 0 && item.isChildren !== false) {
        return {
          key: item.menuUrl,
          icon: <ICON />,
          label: item.menuName,
          children: [...bindMenu(item.menuChilds)],
        };
      } else {
        return {
          key: item.menuUrl,
          //   icon: <ICON />,
          label: item.menuName,
        };
      }
  });
  return arr;
}
return (
  <Sider trigger={null} style={{ backgroundColor: "white", height: '100%', overflow: 'auto' }}>
    <Menu
      onClick={(e) => MenuProps(e)}
      theme="light"
      mode="inline"
      selectedKeys={[defaultKey]}
      items={bindMenu(user.menuInfo ? user.menuInfo : [])}
    />
  </Sider>
);
}
export default Asider;
